<template>
  <div class="customeApplyGroup">
    <a-form-model
      ref="selectApplyGroup"
      :model="applyGroupForm"
      :label-col="{ span: lang == 'en' ? 4 : 2 }"
      :wrapper-col="{ span: lang == 'en' ? 18 : 22 }"
      :rules="rules"
    >
      <a-form-model-item :label="$t('flowControl.appG')" prop="customGroup">
        <a-select
          class="customerSelect"
          :placeholder="$t('deviceDetail.pSelect')"
          v-model="applyGroupForm.customGroup"
        >
          <div slot="dropdownRender" slot-scope="menu">
            <v-nodes :vnodes="menu" />
            <div
              v-if="applyGroup.length > 0"
              class="customAdd"
              @mousedown="(e) => e.preventDefault()"
              @click="gotoConf"
            >
              <a-icon type="plus" />
              {{ $t('deviceDetail.add2') }}
            </div>
            <div class="addWapper" v-else>
              {{ $t('flowControl.noCustomeData') }}
              <span class="goToAdd" @click="gotoConf">
                {{ $t('aclconfig.set') }}
                <icon-font type="ic-right" style="margin-left: 3px" />
              </span>
            </div>
          </div>
          <a-select-option
            v-for="it in applyGroup"
            :key="it.customGroupId"
            :value="it.customGroupId"
          >
            <div class="selectOptionWapper">
              {{ it.customGroupName }}
              <div class="operate">
                <a-space>
                  <a-icon
                    type="edit"
                    class="opreateIcon"
                    @click.stop="editApplyGroup(it)"
                    style="color: #2b6afd"
                  />
                  <a-icon
                    type="delete"
                    class="opreateIcon"
                    @click.stop="delApplyGroup(it)"
                    style="color: #8c8c8c"
                  />
                </a-space>
              </div>
            </div>
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
    <OperateCustomModal
      :visible="visible"
      :gwSn="gwSn"
      @closeAddModal="closeAddModal"
      :operateType="operateType"
      :selectInfo="selectInfo"
    />
  </div>
</template>
<script>
import { maccApi, requestHttp } from '@utils/index';
import OperateCustomModal from './components/operateCustomModal';
import { RjModal } from '@components';
import { mapState } from 'vuex';
export default {
  name: 'CustomeApplyGroup',
  props: {
    gwSn: {
      type: String,
    },
    selectApplyGroupId: {
      type: String,
    },
  },

  data() {
    return {
      visible: false,
      applyGroupForm: {
        customGroup: this.selectApplyGroupId || undefined,
      },
      // applyGroup: [],
      operateType: 'add',
      selectInfo: null,
      rules: {
        customGroup: [
          {
            required: true,
            message: this.$t('flowControl.pleaseSelectApply'),
            trigger: 'blur',
          },
        ],
      },
    };
  },

  components: {
    OperateCustomModal,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes,
    },
  },

  computed: {
    ...mapState('FlowControl', ['applyGroup']),
    ...mapState('I18n', ['lang']),
  },

  async mounted() {
    console.log('this.selectApplyGroupId', this.selectApplyGroupId);
  },

  watch: {},

  methods: {
    //获取自定义应用组
    async getCustomeApplyGroup() {
      const {
        code,
        msg,
        data = [],
      } = await requestHttp({
        api: maccApi.GET_CUSTOME_APPLU_GROUP,
        method: 'GET',
        querys: {
          sn: this.gwSn,
        },
      });
      if (code != 0) {
        this.$message.error(msg);
        return;
      }
      this.applyGroupArr = data;
    },

    async addCustomeApplyGroup(params) {
      const { code, msg } = await requestHttp({
        api: `${maccApi.ADD_CUSTOME_APPLY_GROUP.replace('{sn}', this.gwSn)}`,
        method: 'POST',
        params,
      });

      if (code != 0) {
        this.$message.error(msg);
        return;
      }

      this.$message.success(this.$t('common.addSuceess'));
    },

    async editCustomeApplyGroup(params) {
      const { code, msg } = await requestHttp({
        api: `${maccApi.ADD_CUSTOME_APPLY_GROUP.replace('{sn}', this.gwSn)}`,
        method: 'PUT',
        params,
      });

      if (code != 0) {
        this.$message.error(msg);
        return;
      }
      this.$message.success(this.$t('common.editSuccess'));
    },

    gotoConf() {
      this.visible = true;
      this.operateType = 'add';
    },

    async closeAddModal(type, params) {
      if (type == 'add') {
        await this.addCustomeApplyGroup(params);
        this.$store.dispatch('FlowControl/getCustomeApplyGroup', {
          sn: this.gwSn,
        });
      } else if (type == 'edit') {
        await this.editCustomeApplyGroup(params);
        this.$store.dispatch('FlowControl/getCustomeApplyGroup', {
          sn: this.gwSn,
        });
      }
      this.visible = false;
    },

    //编辑自定义应用组
    editApplyGroup(info) {
      this.operateType = 'edit';
      this.selectInfo = info;
      this.visible = true;
    },

    async deleteCustomeApplyGroup(params) {
      const { code, msg } = await requestHttp({
        api: maccApi.DELETE_CUSTOME_APPLY.replace('{sn}', this.gwSn),
        method: 'DELETE',
        params,
      });
      if (code != 0) {
        this.$message.error(msg);
        return false;
      }

      return true;
    },

    //删除自定义应用组
    delApplyGroup(info) {
      const { customGroupName, customGroupId, referenceCount } = info;
      if (referenceCount > 0) {
        this.$message.error(this.$t('flowControl.unableDelete'));
        return;
      }
      console.log('删除');
      RjModal.confirm({
        title: this.$t('common.tip'),
        content: this.$t('flowControl.confirmDelete', [customGroupName]),
        onOk: async () => {
          const params = [customGroupId];
          const res = await this.deleteCustomeApplyGroup(params);
          if (!res) return;
          if (customGroupId == this.applyGroupForm.customGroup) {
            //删除当前选中改的
            this.applyGroupForm.customGroup = undefined;
          }
          // await this.getCustomeApplyGroup();
          this.$store.dispatch('FlowControl/getCustomeApplyGroup', {
            sn: this.gwSn,
          });
        },
      });
    },

    //获取选中的自定义应用组的ID
    getApplyGroupValue() {
      return new Promise((resolve) => {
        this.$refs.selectApplyGroup.validate((valid) => {
          if (valid) {
            resolve({
              success: true,
              data: this.applyGroupForm.customGroup,
            });
          } else {
            resolve({
              success: false,
            });
          }
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.addWapper {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  font-size: 14px;
  .goToAdd {
    color: #2b6afd;
    cursor: pointer;
    margin-left: 10px;
  }
}
.selectOptionWapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .valInfo {
    margin-right: 10px;
    width: calc(100% - 60px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; //表示强制换行显示
    display: inline-block;
  }
  .operate {
    display: none;
  }
  .opreateIcon {
    font-size: 16px;
  }
  &:hover {
    .operate {
      display: inline-block;
    }
  }
}
.customAdd {
  padding: 8px;
  cursor: pointer;
  margin: 4px 0;
  padding-top: 15px;
  border-top: 1px solid #ececec;
}
</style>
